<template>
	<view>
		<view class="logo_c">
			<view class="logo_item">
				<image class="logo" src="../../static/image/leju-logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="userInput">
			<input class="userAccount" type="number" v-model="user.tel" />
			<input class="userAccount" type="password" password v-model="user.password" />
		</view>

		<LoadingButton @loginClickS="loginClick" :isLoadingS="isLoading" titleS="登陆"></LoadingButton>
		<view class="btn_bar">
			<navigator url="./resetPassword/resetPassword">
				找回密码
			</navigator>
			<navigator url="./register/register">
				注册账号
			</navigator>
		</view>

	</view>
</template>

<script>
	import WxValidate from "../../utils/WxValidate.js";
	import request from '../../api/request.js';
	import LoadingButton from '../../components/common/loadingButton.vue';
	export default {
		data() {
			return {
				user: {
					tel: '17596496508',
					password: '123456'
				},

				isLoading: false
			}
		},
		components: {
			LoadingButton
		},
		methods: {
			// 登录
			async loginClick() {
				const error = () => {
					let params = this.user;
					if (!this.WxValidate.checkForm(params)) {
						//表单元素验证不通过，此处给出相应提示
						let error = this.WxValidate.errorList[0];
						switch (error.param) {
							case "tel":
							case "password":
								uni.showToast({
									title: error.msg,
									icon: "none"
								})
								break;
						}
					}
					return false;
				}

				// 校验成功
				if (!error()) {
					this.isLoading = !this.isLoading;
					const res = await request({
						url: '/login/doLogin',
						method: 'POST',
						data: {
							password: this.user.password,
							username: this.user.tel
						}
					})
					if (res.data.success) {
						uni.setStorageSync('token', res.data.data.token);
						uni.showToast({
							title: "登录成功"
						});
						setTimeout(() => {
							uni.switchTab({
								url: '../mine/mine'
							})

						},2000)
					}
				}
			},
			initValidate() {
				let rules = {
					tel: {
						required: true,
						tel: true
					},
					password: {
						required: true,
					}
				}

				let message = {
					tel: {
						required: '请输入手机号',
						tel: '请输入正确的手机号'
					},
					password: {
						required: "必须输入密码"
					}
				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},
		},
		onLoad() {
			this.initValidate();
		}
	}
</script>

<style lang="scss" scoped>
	.logo_c {
		box-sizing: content-box;
		padding: 120rpx 0 64rpx 0;

		.logo_item {
			width: 160rpx;
			height: 160rpx;
			margin: auto;
			overflow: hidden;
			border-radius: 50%;

			.logo {
				width: 160rpx;
			}
		}
	}

	.userInput {
		text-align: center;

		.userAccount {
			display: inline-block;
			box-sizing: border-box;
			text-align: left;
			width: 80%;
			height: 100rpx;
			padding: 32rpx;
			margin: 24rpx auto;
			border-radius: 50rpx;
			box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
		}
	}

	// .login_btn {
	// 	width: 600rpx;
	// 	height: 100rpx;
	// 	margin-top: 40rpx;
	// 	line-height: 100rpx;
	// 	text-align: center;
	// 	outline: none;
	// 	color: #fff;
	// 	border-radius: 50rpx;

	// 	background-color: $themeColor;
	// 	transition: width 1s;

	// 	.loading_image {
	// 		transform-origin: center center;
	// 		transform: rotate(0deg);
	// 		width: 30rpx;
	// 		height: 30rpx;
	// 		animation: loadingImage 0.5s infinite;
	// 	}

	// 	&.loading {
	// 		animation: changeBtnWidth 0.5s forwards;
	// 	}
	// }

	.btn_bar {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;

		navigator {
			height: 26rpx;
			line-height: 26rpx;
			padding: 0 20rpx;
			font-size: $uni-font-size-sm;
			color: rgba(0, 0, 0, .7);

			&:nth-child(1) {
				border-right: 1rpx solid rgba(0, 0, 0, .7);
			}
		}
	}


</style>
